<script setup>
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ref } from 'vue'
const router = useRouter()
const store = useStore()
const userInfo = ref(store.state.userInfo)
const goto = () => {
    localStorage.clear()
    router.push('/login')
}
</script>
<template>
    <div class="header">
        <div class="title">
            ChatGPT
        </div>
        <div class="titleR">
            <div class="title">
                你好~<span>{{ userInfo.realName }}</span>
            </div>
        </div>
    </div>
</template>

<style scoped lang="stylus">
.header
    height: 100%
    display: flex
    align-items: center
    justify-content: space-between
    .title
        line-height: 50px
        font-size 16px
    .titleR
        display: flex
        align-items: center
    .tip
        width: 30px
        height: 30px
        display: flex
        align-items: center
        justify-content: center
        margin-left: 10px
        border-radius: 30px
        cursor pointer
        &:hover{
            background: #e9ebf1
        }
</style>
